<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="<c:url value="css/bootstrap.css" /> " >
		<link rel="stylesheet" href="<c:url value="css/bootstrap-theme.css" /> ">
		<script type="text/javascript" src="<c:url value="js/jquery-2.1.1.js" /> "></script>
		<script type="text/javascript" src="<c:url value="js/bootstrap.js" /> "></script>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>List User</title>
		<script type="text/javascript">
			$(document).ready(function(){
				$(".deleteToModal").click(function(e){
					e.preventDefault();
					$("#modalDelete .deleteOfModal").attr("href", $(this).attr("href"));
					$("#modalDelete").modal();
				});

				$(".editToModal").click(function(e){
					e.preventDefault();
					$("#editModal .editOfModal").attr("href", $(this).attr("href"));
					$("#editModal").modal();
				});
			});

		</script>
	</head>
	<body>
		<div class="container">
			 <!-- Static navbar -->
	      <div class="navbar navbar-default" role="navigation">
	        <div class="container-fluid">
	          <div class="navbar-header">
	            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
	              <span class="sr-only">Toggle navigation</span>
	              <span class="icon-bar"></span>
	              <span class="icon-bar"></span>
	              <span class="icon-bar"></span>
	            </button>
	            <a class="navbar-brand" href="index.jsp">JSP Servlet</a>
	          </div>
	          <div class="navbar-collapse collapse">
	            <ul class="nav navbar-nav">
	              <li><a href="index.jsp">Home</a></li>
	              <% if(session.getAttribute("username") != null) { %>
	              <li><a>Welcome <%= session.getAttribute("username") %></a></li>
	              <% } %>
	              <% if(session.getAttribute("username") != null) { %>
	               <li><a href="<c:url value="/profile" /> ">Profile</a></li>
	              <% } %>
	              <% if(session.getAttribute("username") != null) {
	            	  if(session.getAttribute("username").equals("admin")) {
	              %>
	              <li class="active"><a href="<c:url value="/listUser" />">List User</a></li>
	              <% } } %>
	              <li><a href="register.jsp">Register</a></li>
	              <% if(session.getAttribute("username") == null) { %>
	              <li><a href="login.jsp">Login</a></li>
	              <% } %>
	              <% if(session.getAttribute("username") != null) { %>
	              <li><a href="upload.jsp">Upload</a></li>
	              <% } %>
	              <% if(session.getAttribute("username") != null) { %>
	              <li><a href="<c:url value="/download" />">Download</a></li>
	              <% } %>
	              <% if(session.getAttribute("username") != null) { %>
	              <li><a href="<c:url value="/history" />">Your History</a></li>
	              <% } %>
	              <% if(session.getAttribute("username") != null) { %>
	              <li><a href="<c:url value="/logoutServlet" />">Logout</a></li>
	              <% } %>
	            </ul>
	          </div><!--/.nav-collapse -->
	        </div><!--/.container-fluid -->
	      </div>
	      </div> <!-- End Container -->
	    <div class="container">
	      <div class="bs-callout bs-callout-danger">
			  <h4>List User</h4>
			  You can add, edit, delete normal user
		  </div>
		  
		  <div style="padding-bottom: 3%">
		  	<button class="btn btn-primary btn-lg" onclick="window.location='register.jsp'"><span class="glyphicon glyphicon-plus-sign"></span> Create New User</button>
		  </div>
		  
		  <c:if test="${not empty messageEdit}">
			    <div class="alert alert-danger">${messageEdit}</div>
		  </c:if>
			    
		  <table class="table table-striped table-bordered table-hover">
		  	<tr>
		  		<th>Username</th>
		  		<th>Password</th>
		  		<th>Edit</th>
		  		<th>Delete</th>
		  	</tr>
		  	<tr>
		  		<c:forEach items="${listUser}"  var="user">
		  			<tr>
		  				<td>${user.username}</td>
		  				<td>${user.password}</td>
		  				<td><a href="<c:url value="/profile?username=${user.username}" />" class="btn btn-warning editToModal"><span class="glyphicon glyphicon-cog"></span> Edit</a></td>
		  				<td><a href="<c:url value="/deleteuser?username=${user.username}" />"  class="btn btn-danger deleteToModal"><span class="glyphicon glyphicon-trash"></span> Delete</a></td>
		  			</tr>
		  		</c:forEach>
		  	</tr>
		  </table>
		  
		  <div class="bs-callout bs-callout-danger">
			  <h4>History User</h4>
			  You can see latest date action
		  </div>
		  
		  <table class="table table-striped table-bordered table-hover">
		  	<tr>
		  		<th>Username</th>
		  		<th>Register Date</th>
		  		<th>Modified Date Latest</th>
		  		<th>Upload Date Latest</th>
		  		<th>Download Date Latest</th>
		  		<th>Capacity</th>
		  	</tr>
		  	<tr>
		  		<c:forEach items="${listUser}"  var="user">
		  			<tr>
		  				<td>${user.username}</td>
		  				<td>${user.registerDate}</td>
		  				<td>${user.modifiedDate}</td>
		  				<td>${user.uploadDate}</td>
		  				<td>${user.downloadDate}</td>
		  				<td>${user.capacity} bytes</td>
		  			</tr>
		  		</c:forEach>
		  	</tr>
		  </table>

		  <!-- Modal -->
			<div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
			        <h4 class="modal-title" id="myModalLabel">Delete User</h4>
			      </div>
			      <div class="modal-body">
			        Are you sure ?
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			        <a href="" type="button" class="btn btn-primary deleteOfModal">Delete</a>
			      </div>
			    </div>
			  </div>
			</div> <!-- End Modal -->
			
		  	<!-- Modal -->
			<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			  <div class="modal-dialog modal-lg">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
			        <h4 class="modal-title" id="myModalLabel">Go Profile</h4>
			      </div>
			      <div class="modal-body">
			      	Go To User Profile ? 
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			        <a href="" type="button" class="btn btn-primary editOfModal">Ok</a>
			      </div>
			    </div>
			  </div>
			</div>
			</div>	
			<div class="container">
				<div class="navbar navbar-default navbar-fixed-bottom">
		 		<div  class="container">
		        <p class="navbar-text">&copy; Hai Nguyen| Java Fresher</p>
		        <a href="#" class="navbar-btn  btn btn-danger pull-right"><span class="glyphicon glyphicon-chevron-up"></span> Back To Top</a>
		 		</div>
				</div>
			</div>
	</body>
</html>